﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" href="__STATIC__/common/css/import.css">{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="{:url('doCourse')}" class="btn btn-primary btn-lg">新增</a>
                    <a href="javascript: void(0)" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#importCourse">导入章节</a>

                    <div class="ibox-tools">
                        <a href="/导入章节模板.xlsx" class="btn btn-primary btn-lg" style="float: right">导入章节模板下载</a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>封面图</th>
                                <th>简介</th>
                                <th>PPT转换状态</th>
                                <th>排序</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                <td>{$vo.title}</td>
                                <td>
                                    <img src="{$vo.img|getPicture}" style="width: 100px;height: 100px; object-fit: cover"/>
                                </td>
                                <td>{$vo.brief}</td>
                                {if $vo.ppt_upload_status == -1}
                                <td style="color: red">转换失败</td>
                                {else /}
                                <td>{$vo.ppt_upload_status == 0 ? '转换中' : '转换成功'}</td>
                                {/if}
                                <td>{$vo.sort}</td>
                                <td>{$vo.create_time|timeFormat}</td>
                                <td>
                                    <a href="{:url(doCourse, ['id' => $vo.id])}" class="btn btn-white btn-sm"><i class="iconfont icon-edit"></i> 编辑
                                    </a>
                                    <a href="{:url(delCourse, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-del"><i class="iconfont icon-trash"></i> 删除
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--    导入章节弹框    -->
<div class="modal inmodal" id="importCourse" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content animated flipIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="closeWindow()">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">导入章节</h4>
            </div>
            <div class="modal-body">
                <input type="file" id="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" style="display: none">
                <div class="upload-info" onclick="chooseFile()">选择文件</div>

                <div class="result">

                </div>
            </div>
        </div>
    </div>
</div>{/block}


{block name='js'}
<script>
    function closeWindow() {
        window.location.reload();
    }


    function chooseFile() {
        $('#file').trigger("click");
        $('#file').change(function () {
            var file = $(this)[0].files[0];
            var formData = new FormData();
            var url = "/Upload/UploadFile/importUploadFile";
            formData.append('download', file);
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    clearFile('file');
                    if (data.status == 0) {
                        $('.result').html('');

                        var html = '<div class="success">' + data.info + '</div>';
                        $('.result').append(html);

                        setTimeout(() => {
                            var path = data.data;// 文件路径，用户导入数据

                            var path_arr = path.split("/");
                            $('.upload-info').html(path_arr[path_arr.length - 1])

                            $.post('/admin/manage/importCourse', {
                                path: path
                            }, res => {
                                if (res.result == 1) {
                                    var info = res.data;
                                    $.each(info, function (key, val) {
                                        var html = '<div class="' + (val.status == 1 ? 'success' : 'error') + '">' + val.msg + '</div>';
                                        $('.result').append(html);
                                    })

                                    $('.result').append("<div class='success'>数据导入完成，关闭本弹框可查看最新列表数据</div>")
                                } else {
                                    layer.msg(res.msg);
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 500)
                                }
                            }, 'JSON')
                        }, 1000)
                    } else {
                        var html = '<div class="error">' + data.info + '</div>';
                        $('.result').append(html);
                    }
                }
            });
        })
    }
</script>{/block}
